import Taro from '@tarojs/taro'
import {Button, View} from '@tarojs/components'

export default function MyButton(props) {
  //  可以变的有 border color bc size = normal|| middle
  // color : 字体颜色 gray: #818181
  // border: 是否有边框 true
  // bg: 背景颜色 red green blue trans
  // size 按钮的大小: normal 正常 middle 中等大小
  // let {bg='blue',color='white',border='0rpx solid #A8A8A8',size='normal'} = props
  function createStyle(obj) {
    let {bg='blue',color='white',size='normal'} = obj
    let buttonStyle = {
      background: '',
      color: '',
      border: '',
      height: '100%',
      width: '100%'
    }
    switch(bg) {        
      case 'red': 
        buttonStyle.background = '#CD6865'
        break;
      case 'green': 
        buttonStyle.background = '#56B944'
        break;
      case 'trans': 
        buttonStyle.background = 'transparent'
        break;
      default: 
        buttonStyle.background = '#00A0E8'
        break;
    }
    switch(color) {
      case 'gray': 
        buttonStyle.color = '#818181'
        break;
      default: buttonStyle.color = 'white'
    }
    (size==='middle') && (buttonStyle.fontSize='14px') 
    return buttonStyle
  }
  let btnStyle = createStyle(props)
  let {size,onHandleButtonClick} = props
  let viewSize = {}
  if(size==='middle') viewSize={width: '100%',height: '30px',fontSize: '12px'}
  else {
    viewSize={width: '100%'}
  }
  return (
    <View style={viewSize}>
      <Button
        style={btnStyle}
        onClick={onHandleButtonClick}
      >
        {this.props.children}
      </Button>
    </View>
  )
}